<template>
    <!-- 添加或修改菜单对话框 -->
    <el-dialog title="数据权限" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="formData" :model="formData" :rules="rules" label-width="80px">
            <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="formData.roleName" size="small" disabled />
            </el-form-item>
            <el-form-item label="权限字符" prop="roleKey">
                <el-input v-model="formData.roleKey" size="small" disabled />
            </el-form-item>
            <el-form-item label="数据权限" prop="dataScope">
                <el-select v-model="formData.dataScope" size="small">
                    <el-option label="全部数据权限" value="1"></el-option>
                    <el-option label="自定义数据权限" value="2"></el-option>
                    <el-option label="本部门数据权限" value="3"></el-option>
                    <el-option label="本部门及以下数据权限" value="4"></el-option>
                    <el-option label="仅本人数据权限" value="5"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="拥有权限" prop="menuIds" v-if="formData.dataScope === '2'">
                <el-tree
                    ref="tree"
                    :data="deptTree"
                    show-checkbox
                    node-key="id"
                    :props="defaultProps"
                    @check="handleCheckChange"
                ></el-tree>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button
                type="primary"
                @click="submitForm('formData')"
                :disabled="loading"
                :icon="loading?'el-icon-loading':'el-icon-circle-plus-outline'"
                size="mini"
            >确 定</el-button>
            <el-button @click="open = false" size="mini">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { getDeptList, authDataScope, getRoleDeptIds } from "@/api/system";
const ERR_OK = 200;
export default {
    data() {
        return {
            formData: {},
            rules: {
                roleName: [
                    {
                        required: true,
                        message: "请输入角色名称",
                        trigger: "blur"
                    }
                ],
                roleKey: [
                    {
                        required: true,
                        message: "请输入权限字符",
                        trigger: "blur"
                    }
                ],
                dataScope: [
                    {
                        required: true,
                        message: "请选择数据权限",
                        trigger: "change"
                    }
                ]
            },
            loading: false,
            open: false,
            deptTree: [],
            defaultProps: {
                label: "title"
            }
        };
    },
    created() {
        this.loadMenu();
    },
    methods: {
        loadMenu() {
            getDeptList().then(res => {
                this.buildtree(res.data.rows, this.deptTree, 0);
            });
        },
        buildtree(list, arr, parentId) {
            list.forEach(item => {
                if (item.parentId === parentId) {
                    var child = {
                        key: item.deptId + "",
                        id: item.deptId + "",
                        title: item.deptName,
                        children: []
                    };
                    this.buildtree(list, child.children, item.deptId);
                    if (child.children.length === 0) {
                        delete child.children;
                    }
                    arr.push(child);
                }
            });
        },
        edit(row) {
            this.formData = {
                deptIds: [],
                dataScope: row.dataScope,
                roleId: row.roleId,
                roleKey: row.roleKey,
                roleName: row.roleName
            };
            this.open = true;
            this.$nextTick(() => {
                if (row.roleId && this.formData.dataScope === "2") {
                    this.$refs.tree.setCheckedKeys([]);
                    getRoleDeptIds(row.roleId).then(res => {
                        this.$refs.tree.setCheckedKeys(res.data);
                        this.formData.deptIds = res.data;
                    });
                }
            });
        },
        handleCheckChange(item, { checkedKeys, halfCheckedKeys }) {
            this.formData.deptIds = this.$refs.tree.getCheckedKeys();
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.formData.deptIds =
                        this.formData.dataScope === "2"
                            ? this.formData.deptIds
                            : [];
                    this.loading = true;
                    authDataScope(this.formData).then(res => {
                        this.loading = false;
                        if (res.data.code === ERR_OK) {
                            this.$message.success(res.data.msg);
                            this.$emit("ok");
                            this.open = false;
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    });
                } else {
                    return false;
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.el-select,
.el-cascader {
    width: 100%;
}
</style>